<div ng-controller="VMMgmtCtrl">
    <div class="row-fluid">
        <div class="span10">
            <div ng-include="'/static/partials/shared/_vm_action_bar.html'"/>
        </div>
        <div class="span2">
            <span>每页显示</span>
            <select class="input-mini" ng-model="page_size" ng-options="pz for pz in page_sizes"
                    ng-change="change(page_size)">
            </select>
            <span>条</span>
        </div>
    </div>
    <table class="table table-bordered table-condensed" tableorder="vms">
        <thead>
        <tr>
            <th><input type="checkbox" ng-model="selected_all"/></th>
            <th by="name">名称</th>
            <th by="cpu_usage">CPU使用率</th>
            <!--<th by="mem_usage">内存使用率</th>-->
            <th by="host.cluster.name">集群</th>
            <th by="host.host_name">主机</th>
            <!--<th>IP</th>-->
            <th by='graphics_type'>显示</th>
            <th by='os_type'>操作系统</th>
            <th>模板</th>
            <th by="vcpu">CPU</th>
            <th by="memory">内存</th>
            <th>磁盘</th>
            <th>网络</th>
            <th by="snapshot_set.length">快照</th>
            <th by="status">状态</th>
            <th by="user.username">用户</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr selectable="m" ng-repeat="m in vms |orderBy:orderfield:reverse" ng-click="selectvm(m)">
            <td><input type="checkbox" value="{{ m.id }}" ng-model="selected[m.id]"/></td>
            <td>
                <a href="#/vm/{{ m.id }}">{{ m.name }}</a>
                <img class="img-size16" src="/static/images/reset.png" alt="还原模式" ng-show="m.resetmode"/>
            </td>
            <td>
                <div class="progress">
                        <span class="green"
                              style="width: {{ m.cpu_usage }}%;"><span>{{ m.cpu_usage }}%</span></span>
                </div>
            </td>
            <!--<td>
                <div class="progress">
                        <span class="green"
                              style="width: {{ m.mem_usage }}%;"><span>{{ m.mem_usage }}%</span></span>
                </div>

            </td>-->
            <td>{{ m.host.cluster.name }}</td>
            <td>{{ m.host.host_name }}</td>
            <!--<td>
                <span ng-repeat="iface in m.interface_set"></span>
            </td>-->
            <td>{{ m.graphics_type }}</td>
            <td>
                <img ng-src="/static/images/os16/os_{{ m.os_type |lowercase }}.png" alt=""/>
                {{ m.os_type }}
            </td>
            <td>{{ m.vdisk_set[0].image.name || '无'}}</td>
            <td>{{ m.vcpu }}</td>
            <td>{{ m.memory }}MB</td>
            <td>
                {{ m.vdisk_set.length }}
            </td>
            <td>
                <ethiplist interfaces='m.interface_set'></ethiplist>
            </td>
            <td><a href="#/vm/{{ m.id }}#snapshots">{{ m.snapshot_set.length }}</a></td>
            <td>
                <img ng-src="/static/images/vmstatus/{{ m.status }}.png" alt="" class="img-size16"/>
                {{ m.status | vmstatus }}

            </td>
            <td>{{ m.user.username }}</td>
            <td>
                <button class="btn btn-primary btn-mini" ng-click="link_vnc(m)" ng-show="m.graphics_type=='vnc'">连接</button>
                <a class="btn btn-primary btn-mini" href="spice://{{ m.remote_password }}@{{ m.host.ip }}:{{ m.id+5900 }}" ng-show="m.graphics_type=='spice'">连接</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="pagination">
        <ul>
            <li ng-hide="should_hide()" ng-class="prev_class" ng-click="prev()"><a href="javascript:void(0);">上一页</a>
            </li>
            <li ng-repeat="i in [] | range:page_count()" ng-hide="should_hide()" ng-click="page(i)"
                ng-class="(i == current_page) && 'active'">
                <a href="javascript:void(0)">{{ i + 1}}</a>
            </li>
            <li ng-hide="should_hide()" ng-class="next_class" ng-click="next()"><a href="javascript:void(0);">下一页</a>
            </li>
        </ul>
    </div>
</div>
